<script setup lang="ts">
import type { VbenFormProps } from '@vben/common-ui';
import type { VxeGridProps } from '@vben/plugins/src/vxe-table/types';

import type { RowType } from '#/views/system/dict/dict.data';

import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';

import { message } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
  dictDelApi,
  dictQueryPageListApi,
  dictRefreshCacheApi,
} from '#/api/system/dict';
import DictItemList from '#/views/system/dict/dictItem/DictItemList.vue';
import DictFormModal from '#/views/system/dict/modules/DictFormModal.vue';

const formOptions: VbenFormProps = {
  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
  showCollapseButton: false,
  commonConfig: {
    colon: true,
    labelWidth: 80,
  },
  schema: [
    {
      component: 'Input',
      fieldName: 'dictName',
      label: '字典名称',
    },
    {
      component: 'Input',
      fieldName: 'dictCode',
      label: '字典编码',
    },
  ],
};
const gridOptions: VxeGridProps<RowType> = {
  height: 'auto',
  toolbarConfig: {
    slots: {
      buttons: 'toolbar-buttons',
    },
  },
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    { title: '字典名称', field: 'dictName' },
    { title: '字典编码', field: 'dictCode' },
    { title: '备注', field: 'remark' },
    {
      field: 'action',
      fixed: 'right',
      slots: { default: 'action' },
      title: '操作',
      width: 180,
    },
  ],
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        return await dictQueryPageListApi({
          pageNo: page.currentPage,
          pageSize: page.pageSize,
          ...formValues,
        });
      },
    },
  },
};
const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });

const [FromModal, formModalApi] = useVbenModal({
  connectedComponent: DictFormModal,
  onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      gridApi.query();
    }
  },
});
const [Drawer, drawerApi] = useVbenDrawer({
  connectedComponent: DictItemList,
});

function openForm(id) {
  formModalApi.setData({
    id,
  });
  formModalApi.open();
}
function openDictItemDrawer(row) {
  drawerApi.setData(row);
  drawerApi.open();
}
async function refreshCache() {
  const msg = await dictRefreshCacheApi();
  message.success(msg);
}
async function delRow(row) {
  const msg = await dictDelApi(row.id);
  message.success(msg);
  await gridApi.query();
}
</script>

<template>
  <Page auto-content-height>
    <Drawer class="w-[40%]" />
    <FromModal class="w-[40%]" />
    <Grid>
      <template #toolbar-buttons>
        <a-button
          v-access:code="'sys:dict:add'"
          type="primary"
          @click="openForm()"
        >
          新增
        </a-button>
      </template>
      <template #toolbar-tools>
        <a-button
          v-access:code="'sys:dict:refreshCache'"
          class="mr-2"
          type="primary"
          @click="refreshCache"
        >
          刷新缓存
        </a-button>
      </template>
      <template #action="{ row }">
        <a-button
          v-access:code="'sys:dict:child'"
          size="small"
          type="link"
          @click="openDictItemDrawer(row)"
        >
          字典项
        </a-button>
        <a-button
          v-access:code="'sys:dict:edit'"
          size="small"
          type="link"
          @click="openForm(row.id)"
        >
          编辑
        </a-button>
        <a-popconfirm
          cancel-text="再想想"
          title="您确定要删除吗?"
          @confirm="delRow(row)"
        >
          <a-button
            v-access:code="'sys:dict:del'"
            size="small"
            type="link"
            danger
          >
            删除
          </a-button>
        </a-popconfirm>
      </template>
    </Grid>
  </Page>
</template>
